終於要到了鐵人賽的尾聲了，筆者一直想在最後幾篇來了解一下React，所以趁現在JavaScript應該算是告一個段落時，來開始認識他的函式庫React了!

什麼是 React？

React是由 Facebook 團隊所開發維護的開放原始碼 JavaScript 函式庫，擁有很好的延展性、豐富的開發輔助工具和周邊函式庫，是用來建立使用者介面 (UI) 的前端架構，可讓我們使用小巧而獨立的component，來建立複雜的 UI。

• 線上編輯器: CodeSandBox
  在初學React時，建議可用CodeSandbox線上編輯器，讓我們可以直接在線上建立一個React專案。

Component 元件

React component 需要實做 render() function，這個 function 接受輸入的資料並回傳需要顯示的內容。這個範例使用了 JSX，JSX是一個類似 XML 的語法。傳入給元件的輸入資料可以透過this.props在render()function 中存取。

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Judy" />,
  document.getElementById('root')
);

>> 以上顯示: Hello Judy

JSX - JavaScript XML

語法

const element = <h1>Hello World!</h1>;

這個有趣的標籤語法不是一個字串也不是 HTML(雖然看起來很像HTML)。

JSX 語法類似 HTML，全名為JavaScript XML，是一個 JavaScript 的語法擴充，我們在寫 React 的時候可透過這個語法來描述使用者介面的外觀。在 React 中會透過Babel套件將 JSX 標籤語法轉換成 React.createElement 並編譯成讓網頁看得懂的元件，元件非常方便，因為我們可以將程式碼集中在每個文件中，使其更容易維護。

看到對於JSX一個很貼切的解釋:   JSX就是一個披著html的javascript。

為什麼要用 JSX?

在前端中，狀態邏輯與使用者介面本就是密不可分的，與其將他們拆開到各個檔案中存放，不如關注在：以組件方式拆分，其中封裝好 UI 與邏輯，而組間之間彼此獨立，互不相依賴。

由於 JSX 類似 XML 的語法，讓一些非開發人員也更容易看懂，且能精確定義包含屬性的樹狀結構。當 Component 組成越來越複雜時，若使用 JSX 將可以讓整個結構更加直觀、簡潔，可讀性較高。

React並不強制使用 JSX，但它整合 UI 與邏輯，是一個很好的視覺輔助，也是現今大多數人使用的語法。

資料來源:
https://zh-hant.reactjs.org/docs/introducing-jsx.html